02. Setting the Stage

Introduction

In this section we are going to talk about why we need build tools for front end projects.

Example Prep

Go to the Udacity website and inspect element to look at all of the assets on the Udacity home page.

Pro tip: Don't just open inspector and go to the head tag element to see what's there. One of my favorite browser dev tools is the Network tab. Go there and you can look at all the requests made by the page, separate them by type, see the http request responsible, see the response, etc.. I could do an entire course just on this tab probably. You can learn a ton by taking a look at sites this way and it is a priceless debugging tool.

FEND C04 L01 A02 Setting The Stage

On your own

Task Description:

More practice examples.

Task List:

Task Feedback:

Amazing work!

Questions

QUESTION:

Reflect

What are some of your observations and takeaways from looking at Udacity and the other website assets?

ANSWER:

Thanks for your response.

Questions

When loading website styles the order in which each css file is loaded matters

SOLUTION: True

FEND C04 L1 Question 2

Interview Question

QUESTION:

Interview Question

If a client is complaining that their website load time is too slow, what things would you do to assess where the slowdown is occurring and what might fix the issue?

ANSWER:

Some good points you would want to hit if asked this question:
Use the network tab to look at the overall size of the webpage and if any assets are too big
Look at what third party scripts are loading and when
Try Google lighthouse audits (if you haven’t heard of it, look it up you’ll love it)